import { h } from "snabbdom";
import { handleSSMLRemarkClick, handleUnwrapNodes } from '../helper'
export default {
    type: "ssml-say-as",
    renderElem: function (elem, _children, editor) {
        // 将elem转换为Break类型，这里假设elem已经包含了Break类型所需的属性
        const ssml_elem = elem;
        return h(
            "span",
            {
                className: "ssml-wrapper",            
            },
            [
                h(
                    "span",
                    {
                        className: "remarkWrapper",
                        contentEditable: false,
                        style: {backgroundColor: 'var(--ssml-say-as)', padding:"0 5px"},
                        on: {
                            mousedown: function (event) {
                                event.preventDefault();
                            },
                            click: function (event) {
                                console.log("handleSSMLRemarkClick")
                                event.preventDefault();
                                handleSSMLRemarkClick(editor, ssml_elem);
                            },
                        },
                    },
                    [
                        
                        h("span", {
                                className: "data-content",
                                "data-content": ssml_elem.remark,
                            },
                            // ssml_elem.remark
                        ),
                        h("span", 
                            {    
                                className: "iconfont icon-roundclosefill",                  
                                style:{marginLeft:'2px'},  
                                on: {
                                    click: function(event) {    
                                        console.log("handleDeleteNode")  
                                        event.preventDefault(event);                             
                                        handleUnwrapNodes(editor, ssml_elem)                               
                                    },
                                },
                            },
                        
                        ),
                    ]
                ),
                h(
                    "span",
                    {
                        contentEditable: false,
                        style: { color: "var(--ssml-say-as)" , "user-select": "none"},
                    },
                    "【"
                ),
                h("span", _children),
                h(
                    "span",
                    {
                        contentEditable: false,
                        style: { color: "var(--ssml-say-as)" , "user-select": "none"},
                    },
                    "】"
                ),                
            ]
        );
    },
};
